import { NavigationContainer, NavigationState } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { FC, memo, useRef, useState } from 'react';

import analytics, { logScreenView } from '@react-native-firebase/analytics';
import dayjs from 'dayjs';

import Initialize from '@/components/initialize';
import BirthdayWishes from '@/pages/BirthdayWishes';
import EnterText from '@/pages/EnterText';
import PreviewExport from '@/pages/PreviewExport';
import SelectCelebrity from '@/pages/SelectCelebrity';
import Subscription from '@/pages/subscription';
import { SubscriptionOne } from '@/pages/subscription/subscriptionOne';
import Tabs from '@/pages/Tabs';
import Setting from '@/pages/Tabs/Setting';
import Welcome from '@/pages/welcome';
import { RootStackParamList } from '@/types/navigation';
import { getCurrentState } from '@/utils';
import { FirebaseEventsUtil } from '@/utils/analytics';
import { getStorageBooleanItem } from '@/utils/storage';

const Stack = createNativeStackNavigator<RootStackParamList>();
type StackScreenProps = React.ComponentProps<typeof Stack.Screen>;

const StackList: StackScreenProps[] = [
  { name: 'Welcome', component: Welcome },
  { name: 'Tabs', component: Tabs },
  { name: 'Setting', component: Setting },
  // {
  //   name: 'Subscription',
  //   component: Subscription,
  //   options: { headerShown: false, gestureEnabled: false },
  // },
  {
    name: 'SubscriptionOne',
    component: SubscriptionOne,
    options: { headerShown: false, gestureEnabled: false },
  },
  {
    name: 'SelectCelebrity',
    component: SelectCelebrity,
    options: { headerShown: false },
  },
  {
    name: 'EnterText',
    component: EnterText,
    options: { headerShown: false },
  },
  {
    name: 'PreviewExport',
    component: PreviewExport,
    options: { headerShown: false },
  },
  {
    name: 'BirthdayWishes',
    component: BirthdayWishes,
    options: { headerShown: false },
  },
];

/** 记录日志 */
const handleLogScreenView = (state: NavigationState) => {
  if (!state) {
    return;
  }
  const value = getCurrentState(state);
  logScreenView(analytics(), {
    screen_name: value.name,
  });
  return value.name;
};
export const defaultRouteName: keyof RootStackParamList = 'Welcome';

const NavigationConfig: FC = () => {
  const isFirstLaunch = getStorageBooleanItem('isFirstLaunch') ?? true;

  const [viewStartTime, setViewStartTime] = useState(dayjs());
  const pageName = useRef<string>('');
  return (
    <NavigationContainer
      onStateChange={(state) => {
        if (!state) {
          return;
        }
        const page = handleLogScreenView(state);
        if (pageName.current !== '') {
          const currentTime = dayjs();
          setViewStartTime(currentTime);
          const time = currentTime.diff(viewStartTime, 'second');
          FirebaseEventsUtil.page_stay_time(pageName.current, time);
        }
        pageName.current = page ?? '';
      }}
    >
      {/* <Stack.Navigator initialRouteName={!isFirstLaunch ? defaultRouteName : 'Tabs'}> */}
      <Stack.Navigator initialRouteName={'Tabs'}>
        {StackList.map((item) => (
          <Stack.Screen
            options={{
              headerShown: false,
            }}
            {...item}
            key={item.name}
          />
        ))}
      </Stack.Navigator>
      <Initialize />
    </NavigationContainer>
  );
};
export default memo(NavigationConfig);
